<template>
  <!-- 顶部京东登录 -->
  <van-sticky>
    <van-nav-bar left-text="返回" left-arrow @click-left="$router.go(-1)">
      <template #title>
        <p style="font-weight:normal">购物车({{ goodsSum }})</p>
      </template>
    </van-nav-bar>
  </van-sticky>

  <!-- 空购物车 -->
  <div v-if="type === 1">
    <van-empty description="购物车是空的哦">
      <van-button round type="primary" class="bottom-button" @click="$router.push('/home')">立即购物</van-button>
    </van-empty>
  </div>

  <!-- 购物车商品 -->
  <div v-else class="cartShow" v-for="item in list" :key="item.proid">
    <van-checkbox v-model="item.flag" @click="changeOne(item)">&nbsp;&nbsp;&nbsp;</van-checkbox>
    <van-card :price="item.originprice" :title="item.proname" :thumb="item.img1">
      <!-- Stepper 步进器 -->
      <template #footer>
        <van-stepper v-model="item.num" @minus="minus(item)" @plus="plus(item)" theme="round" button-size="22"
          disable-input />
      </template>
    </van-card>
  </div>

  <van-submit-bar :price="allCheckedPrice" button-text="合计">
    <van-checkbox v-model="Allselected" @click="changeChecked">全选</van-checkbox>
  </van-submit-bar>

  <van-list>
    <p class="p">你是不是也想要这些呀</p>
    <van-cell class="cell" v-for="item in recommendList" :key="item.proid"
      @click="$router.push('/details/' + item.proid)">
      <img :src="item.img1" />
      <h6>{{ item.proname }}</h6>
      <p>￥{{ item.originprice }}</p>
    </van-cell>
  </van-list>

</template>
<script>
import { recommendlist, list, selectall, selectone, updatenum } from '../server/cart.js'
export default {
  data() {
    return {
      type: 1,           //用来确认购物车是否为空
      recommendList: [],
      list: [],
      sumPrice: 0,
    }
  },

  // 组件内的首位 
  // 如果已经登录就进入购物车页面 否则进入登录页
  beforeRouteEnter:((to,from) => {
    console.log(to ,from);
    if(to.fullPath === '/home'){
      if(localStorage.getItem("token")){
        return { path: '/cart' }
      }else{
        return true
      }
    }else{
      if(localStorage.getItem('token')){
        return true
      }else{
        return { path: '/login' }
      }
    }
  }),


  created() {
    this.recommend()
    this.cartList()
  },

  computed: {
    // 计算标题栏显示购物车数量  
    goodsSum() {
      return this.list.reduce((prev, item) => {
        return prev + item.num
      }, 0)
    },


    // 计算购物车总价格
    allCheckedPrice() {
      return this.list.reduce((prev, item) => {
        return prev + (item.flag ? item.num * item.originprice * 100 : 0);
      }, 0)
    },


    // 全选状态计算属性
    Allselected: {
      get() {
        return this.list.every(item => item.flag === true)
      },
      set(val) {
        this.list.forEach(item => item.flag = val)
      }
    }
  },

  methods: {
    // 增加商品数量
    plus(item) {
      item.num++
      updatenum({
        cartid: item.cartid,
        num: item.num
      }).then((res) => {
        if (res.code === "200") {
          this.cartList()
        }
      })
    },

    // 减少商品数量
    minus(item) {
      item.num--
      updatenum({
        cartid: item.cartid,
        num: item.num
      }).then((res) => {
        if (res.code === "200") {
          this.cartList()
        }
      })
    },

    // 商品列表选中影响全选
    changeOne(item) {
      selectone({
        cartid: item.cartid,
        flag: item.flag,
      }).then((res) => {
        if (res.code === "200") {
          this.cartList()
        }
      })
    },

    // 全选状态
    changeChecked() {
      let userid = localStorage.getItem('userid')
      selectall({
        userid,
        type: this.Allselected   //type的布尔值为计算属性计算出来的
      }).then((res) => {
        if (res.code === "200") {
          this.cartList()    //重新更新渲染一下购物车
        }
      })
    },

    // 推荐商品列表
    recommend() {
      recommendlist().then((res) => {
        if (res.code === "200") {
          this.recommendList = res.data
        }
      })
    },

    // 购物车商品列表
    cartList() {
      let userid = localStorage.getItem('userid')
      list({ userid }).then((res) => {
        if (res.code === "200") {
          this.list = res.data
          console.log(res);
          console.log(this.list);
          if (this.list.length > 0) {
            this.type = 2
          }
        }
      })
    }
  }
}

</script>
<style scoped>
.bottom-button {
  width: 300px;
  height: 90px;
  color: white;
  background-color: red;
  border: none;
}

.p {
  font-size: 1.867vw;
  color: #969799;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 18.176px 0px;
}

/* 商品列表页 */
.van-list {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
}

.van-list .cell {
  width: 49%;
  margin-bottom: 15px;
}

.van-list img {
  width: 100%;
}

.van-list h6 {
  font-size: 12px;
  color: #2c3e50;
  margin-top: 5px;
  text-align: left;
}

:deep(.van-stepper__plus) {
  background-color: red;
}

:deep(.van-stepper__minus) {
  border: 1px solid red;
  color: red;
}

:deep(.van-card__title),
:deep(.van-card__price-currency),
:deep(.van-card__price-integer) {
  font-weight: normal !important;
}

.cartShow {
  display: flex;
  justify-content: space-between;
}
</style>